<template>
    <el-container>
        <el-container style="min-height: 580px">
            <el-header style="padding: 0;">
                <el-form
                    inline
                    label-width="49px"
                    :model="materialQueryList"
                    style="width: 100%;display: flex;justify-content: space-between;"
                >
                    <el-input
                        placeholder="---请输入物料编号---"
                        v-model="materialQueryList.goodsCode"
                        style="width: 176px"
                        @keyup.enter="$refs.mytable.getData()"
                    />&nbsp;
                    <el-input
                        placeholder="---请输入物料名称---"
                        v-model="materialQueryList.goodsName"
                        style="width: 176px"
                        @keyup.enter="$refs.mytable.getData()"
                    />&nbsp;
                    <el-input
                        placeholder="---请输入物料单位---"
                        v-model="materialQueryList.uomName"
                        style="width: 176px"
                        @keyup.enter="$refs.mytable.getData()"
                    />&nbsp;
                    <el-button type="primary"  @click="opBindData">查询</el-button>
                </el-form>
            </el-header>
            <el-main>
                <scTable ref="mytable" :row-class-name="setRowClass" :queryType="queryType" :data="listData" :queryList="materialQueryList"
                    :column="columnList" :orderList="OrderList"  @row-click="clickRow" :sort-orders="['ascending', 'descending']"
                    @selection-change="selectionChange"
                    row-key="itemCode"
                    key="itemCode"  show-summary remoteSummary
                    style="height: 450px; min-width: 420">
                    <el-table-column type="selection" min-width="50"></el-table-column>
                    <!-- <el-table-column label="采购单位" prop="purchaseUnityName" min-width="180" sortable v-if="isPurchaseUnity"></el-table-column> -->
                    <el-table-column label="物料编码" prop="goodsCode" min-width="110" sortable></el-table-column>
                    <el-table-column label="物料名称" prop="goodsName" min-width="180" sortable></el-table-column>
                    <el-table-column label="单位" prop="uomName" min-width="120" sortable></el-table-column>
                    <el-table-column label="物料规格" prop="standard" min-width="180" sortable></el-table-column>
                    <el-table-column label="物料分类" prop="goodsType" min-width="180" sortable></el-table-column>
                </scTable>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import publicjs from "@/api/model/publicjs";
export default {
    name: "typelist",
    components: {
        publicjs,
    },
    props: {
        queryType: { type: String, default: "pos-sale/org-good-pages" },
        queryList: { type: Object, default: {} },
        // isPurchaseUnity: { type: Boolean, default: false },
    },
    data() {
        return {
            materialTypeFlag:true,
            selectionRows: [],
            selection: [],
            pkList: ["itemCode"],
            attrList: {},
            valueList: {},
            materialQueryList: {},
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            group: [],
            optionsUomCode: [],
            optionsPurchaseUnity: [],
            materialTypeTree: [],
            lastClickTime: 0,
            doubleClickTimeout: null,
        };
    },
    computed: {

    },
    watch: {
        queryList: {
            handler(newVal,oldVal) {
                // 如果 defaultQueryList 更新了，也更新 queryList
                this.materialQueryList = { ...this.queryList,...newVal };
                this.$refs.mytable.getData();
            },
        }
    },
    created() {
        // 将 queryList 的值赋给 queryList
        this.materialQueryList = { ...this.queryList };
    },
    methods: {
        searchChange(){
            this.materialQueryList = {...this.materialQueryList, ...this.queryList };
            this.$nextTick(() => {
                this.$refs.mytable.getData();
          });
        },
        //表格选择后回调事件
        selectionChange(selection) {
            // this.$nextTick(() => {
            //     const newSelection = new Set([...this.selectionRows, ...selection]);
            //     this.selectionRows = Array.from(newSelection); // 转换回数组形式
            // });
            this.selectionRows = selection
            console.log(selection,'selection')
        },
        setRowClass({ row }) {
            if (this.selectionRows.includes(row)) {
                return "selected-row-color";
            }
            return "";
    },
        
        clickRow(row){

                clearTimeout(this.doubleClickTimeout);
                // 记录当前点击时间
                const currentTime = new Date().getTime();

                // 判断是否为双击
                if (currentTime - this.lastClickTime < 250) {
                // 双击
                // this.toggleSelection(row);
                this.$refs.mytable.toggleRowSelection(row, true);
                   // 触发事件，传递选中的行
                this.$emit('selection-changed', this.selectionRows);
                } else {
                // 单击
                this.lastClickTime = currentTime;
                }

                // 设置超时，以便下次点击被认为是单击
                this.doubleClickTimeout = setTimeout(() => {
                this.lastClickTime = 0;
                }, 500);

        },
        initMaterialType(ids,showFlag){
            this.materialQueryList.materialTypeIds = [ids]
            this.materialTypeFlag = showFlag
        },
        async opBindData() {
            this.selectionRows=[];
            this.materialQueryList = {...this.materialQueryList, ...this.queryList };
            this.$nextTick(() => {
                this.$refs.mytable.getData();
            });
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["Status"] }
                );
                if (returnValue.status == 200) {
                    this.optionsState = returnValue.response.find(
                        (p) => p.code == "Status"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material-type/tree",
                    { status: 1 }
                );
                if (returnValue.status == 200) {
                    this.materialTypeTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
            // if(this.isPurchaseUnity){
            //     try {
            //         var returnValue = await this.$API.auth.GetProcessApi.get(
            //             "store/current-purchaseUnity",{ }
            //         );
            //         if (returnValue.status == 200) {
            //             this.optionsPurchaseUnity = returnValue.response;
            //         } else {
            //             this.$message.error("操作失败:" + returnValue.msg);
            //         }
            //     } catch (error) {
            //         this.loading = false;
            //         return false;
            //     }
            // }
        },
    },
    async mounted() {
		debugger
        await this.initOptions();
        await this.opBindData();


    },
};
</script>
<style lang="scss" scoped>
/* 当表格行处于悬停状态时改变背景颜色 */
::v-deep .el-table .el-table__row:hover {
    background-color: #dae8f7;
}
::v-deep .el-table__body .el-table__row--striped.hover-row td {
    background-color: #dae8f7 !important;
}
//   斑马纹选中颜色
::v-deep .el-table__body .el-table__row--striped.selected-row-color td {
    background-color: #b8dcff !important;
}
::v-deep .el-table {
    --el-table-row-hover-bg-color: #dae8f7;
}

::v-deep .el-table tr:nth-child(2n) {
    background: #f2f2f2;
}
</style>
<style>
.el-table .selected-row-color {
    background-color: #b8dcff !important;
}
.el-table--enable-row-hover .el-table__body tr.selected-row-color:hover > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper .el-table__body tr.selected-row-color.hover-row > td {
    background-color: #b8dcff !important;
}
.el-table__fixed-body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > .el-table__row--striped {
    background-color: #b8dcff !important;
}
.el-scrollbar__bar.is-horizontal {
    height: 12px;
    left: 2px;
}
</style>
